<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import { dataMap } from './data.js'

// const animationDuration = 6000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '420px'
    }
  },
  data () {
    return {
      chart: null,
      dataMap: {}
    }
  },
  mounted () {
    this.dataMap = dataMap
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        baseOption: {
          timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: [
              '2002', '2003-01-01', '2004-01-01',
              {
                value: '2005-01-01',
                tooltip: {
                  formatter: '{b} 报警数达到一个高度'
                },
                symbol: 'diamond',
                symbolSize: 16
              },
              '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
              {
                value: '2011-01-01',
                tooltip: {
                  formatter: function (params) {
                    return params.name + '报警数量达到又一个高度'
                  }
                },
                symbol: 'diamond',
                symbolSize: 18
              }
            ],
            label: {
              formatter: function (s) {
                return '10月' + Number((new Date(s)).getFullYear() - 1985) + '日'
              }
            }
          },
          title: {
            subtext: '数据源： 城投集团数据库',
            x: 'center',
            textStyle: {
              color: '#393a3b'
            }
          },
          tooltip: {},
          legend: {
            x: 'right',
            data: ['其他', '灾害', '人工报警', '设备故障'],
            selected: {
              // '总数': false, '金融': false, '房地产': false
            }
          },
          calculable: true,
          grid: {
            top: 80,
            bottom: 100,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace('\n', '')
                  }
                }
              }
            }
          },
          xAxis: [
            {
              'type': 'category',
              'axisLabel': { 'interval': 0 },
              'data': [
                '江岸', '\n江汉', '硚口', '\n汉阳', '武昌', '\n洪山', '青山', '\n东西湖',
                '蔡甸', '\n江夏', '黄陂', '\n新洲', '汉南'
              ],
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '报警数'
            }
          ],
          series: [
            { name: '设备故障', type: 'bar' },
            { name: '人工报警', type: 'bar' },
            { name: '灾害', type: 'bar' },
            { name: '其他', type: 'bar' },
            {
              name: '占比',
              type: 'pie',
              center: ['85%', '35%'],
              radius: '28%',
              z: 100
            }
          ]
        },
        options: [
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2002'] },
              { data: this.dataMap.dataPI['2002'] },
              { data: this.dataMap.dataSI['2002'] },
              { data: this.dataMap.dataTI['2002'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2002sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2002sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2002sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图', x: 'center' },
            series: [
              { data: this.dataMap.dataGDP['2003'] },
              { data: this.dataMap.dataPI['2003'] },
              { data: this.dataMap.dataSI['2003'] },
              { data: this.dataMap.dataTI['2003'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2004'] },
              { data: this.dataMap.dataPI['2004'] },
              { data: this.dataMap.dataSI['2004'] },
              { data: this.dataMap.dataTI['2004'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2005'] },
              { data: this.dataMap.dataPI['2005'] },
              { data: this.dataMap.dataSI['2005'] },
              { data: this.dataMap.dataTI['2005'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2006'] },
              { data: this.dataMap.dataPI['2006'] },
              { data: this.dataMap.dataSI['2006'] },
              { data: this.dataMap.dataTI['2006'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2007'] },
              { data: this.dataMap.dataPI['2007'] },
              { data: this.dataMap.dataSI['2007'] },
              { data: this.dataMap.dataTI['2007'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2008'] },
              { data: this.dataMap.dataPI['2008'] },
              { data: this.dataMap.dataSI['2008'] },
              { data: this.dataMap.dataTI['2008'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2009'] },
              { data: this.dataMap.dataPI['2009'] },
              { data: this.dataMap.dataSI['2009'] },
              { data: this.dataMap.dataTI['2009'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2010'] },
              { data: this.dataMap.dataPI['2010'] },
              { data: this.dataMap.dataSI['2010'] },
              { data: this.dataMap.dataTI['2010'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          },
          {
            title: { text: '实时报警信息统计图' },
            series: [
              { data: this.dataMap.dataGDP['2011'] },
              { data: this.dataMap.dataPI['2011'] },
              { data: this.dataMap.dataSI['2011'] },
              { data: this.dataMap.dataTI['2011'] },
              { data: [
                { name: '设备故障', value: this.dataMap.dataPI['2003sum'] },
                { name: '人工报警', value: this.dataMap.dataSI['2003sum'] },
                { name: '灾害', value: this.dataMap.dataTI['2003sum'] },
                { name: '其他', value: this.dataMap.dataTI['2003sum'] }
              ] }
            ]
          }
        ]
      })
    }
  }
}
</script>
